<script>
import { defineComponent, inject } from 'vue'
import { Viewer } from 'cesium'
import * as mars3d from 'mars3d'
export default defineComponent({
  props: {
  },
  components: {
  },
  setup () {
    const viewer = inject('Viewer')
    const map = new mars3d.Map(viewer)
    const measure = new mars3d.thing.Measure({
      label: {
        color: '#ffffff',
        font_family: '楷体',
        font_size: 20,
        background: false
      }
    })
    map.addThing(measure)

    const handleLenghClick = () => {
      measure.distance({
        showAddText: true
      })
    }
    const handleAreaClick = () => {
      measure.area({
      })
    }

    const removeAll = () => {
      measure.clear()
    }

    return {
      handleLenghClick,
      handleAreaClick,
      removeAll
    }
  }
})
</script>
<template>
  <div class="pane">
    <button id="ceju" @click="handleLenghClick">测距</button>
    <button id="cemian" @click="handleAreaClick">测面</button>
    <button id="qingchu" @click="removeAll">清除</button>
  </div>
</template>
<style lang='scss' scoped>
.pane {
  position: absolute;
  left: 2em;
  top: 2em;
  z-index: 2;
}

button {
  cursor: pointer;
}
</style>
